<template>
  <div class="success">
    <van-nav-bar title="下单成功" left-text="返回" left-arrow @click-left="$router.back()" />

    <div class="wrap">
      <div class="icon"><span class="iconfont icon-success_circle"></span></div>
      <div class="title">下单成功</div>
      <div class="content">订单编号：{{ order.order_number }}</div>
      <div class="btn_group">
        <button class="btn chakan" @click="toOrderView(order.id)">订单详情</button>
        <button class="btn pay" @click="payH5(order.id)">立即支付</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
      order: {}
    };
  },

  created() {
    let order_id = this.$route.query.order_id;
    this.loadData(order_id);
  },
  methods: {
    toOrderView(order_id) {
      this.$router.push({
        path: '/orderViews',
        query: {
          order_id: order_id
        }
      });
    },

    loadData(order_id) {
      this.apiPost('/shop.order/read', { order_id: order_id }).then(res => {
        this.order = res.data;
      });
    },

    // 微信H5支付

    // 调用微信WeixinJSBridge支付
    jsApiCall(signature) {
      let that = this
      /* eslint-disable no-undef */
      WeixinJSBridge.invoke('getBrandWCPayRequest', signature, function(res) {
        // WeixinJSBridge.log(res.err_msg);
        // alert(JSON.stringify(res));

        if (res.err_msg === 'get_brand_wcpay_request:ok') {
          Toast('支付成功');
          that.$router.replace({ name: 'order', params: { active: 0 } });
        } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
          alert('用户取消支付');
        } else {
          alert('支付失败');
        }
      });
    },

    payH5(order_id) {
      this.apiPost('/shop.order/wx_pay_sign', { order_id: order_id }).then(res => {
        // console.log(JSON.stringify(res));
        if (res.data) {
          this.jsApiCall(res.data);
        } else {
          alert('支付出现一些问题，请联系管理员');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.success {
  height: 100%;
  width: 100%;
}

.wrap {
  text-align: center;
  margin-top: 100px;

  .title {
    font-weight: bold;
    font-size: 20px;
  }

  .content {
    line-height: 3;
  }

  .btn_group {
    display: flex;
    justify-content: center;

    .chakan {
      margin-right: 10px;
    }
    .pay {
      background: #1aad19;
      color: white;
    }
  }

  .icon {
    text-align: center;
    .iconfont {
      font-size: 100px;
      color: #1aad19;
    }
  }
}
</style>
